<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>echarts demo</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
    var chart;
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
    require(['echarts', 'echarts/chart/tree'], function(ec) {
        chart = ec.init($("#main")[0]);
        chart.setOption(option);
        var ecConfig = require('echarts/config');
        chart.on(ecConfig.EVENT.CLICK, clickFun2); 
    })
 
 
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}:{c}',
            hideDelay: 0 
        },
        series: [{
            name: '树图',
            type: 'tree',
            orient: 'horizontal', // vertical horizontal
            rootLocation: { x: '10%', y: '60%' }, // 根节点位置  {x: 'center',y: 10}
            nodePadding: 20, //智能定义全局最小节点间距，不能定义层级节点间距，有点搓。
            symbol: 'circle',
            symbolSize: 40,
            roam: true,
            data: [{
                name: '手机',
                value: 6,
                symbolSize: [90, 70],
                cusField: 'category',
                symbol: 'image://http://www.iconpng.com/png/ecommerce-business/iphone.png',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{b}'
                        }
                    }
                },
                children: [{
                        name: '小\n米', //由于label的formatter存在bug，所以无法通过html进行格式化，如果要换行要用\n
                        value: 4,
                        symbol: 'image://http://pic.58pic.com/58pic/12/36/51/66d58PICMUV.jpg',
                        symbolSize: [60, 60],
                        cusField: 'product',
                        children: [{
                            name: '小米11',
                            symbol: 'circle',
                            cusField: 'product', //自定义属性，演示用，实际开发中可以在后台建模产生series整个data时增加而外属性以供使用
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'bottom',
                                        formatter: '{b}--->>>'
                                    }
                                }
                            }
                        }],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'right',
                                    formatter: '{b}--->>>' //有bug，formatter不起作用，这个bug看网友求助已经很久了，但是后面更新的版本一直没有解决
                                }
                            }
                        }
                    },
                    {
                        name: '苹果',
                        symbol: 'image://http://www.viastreaming.com/images/apple_logo2.png',
                        symbolSize: [60, 60],
                        cusField: 'product',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                }
 
                            }
                        },
                        value: 4
                    }
 
                ]
            }]
        }]
    };
     var mockData1 = {"name":"小米11","symbol":"circle","cusField":"product","itemStyle":{"normal":{"label":{"show":true,"position":"right"}}}};
     var mockData2 = {"name":"小米22","symbol":"circle","cusField":"product","itemStyle":{"normal":{"label":{"show":true,"position":"right"}}}};
    //简单使用，点击加载一个节点
    function clickFun(param) {
        console.log(JSON.stringify(param));
        if(param.data.children)
            param.data.children.push(mockData1);
        else
            param.data.children = [deepCopy(mockData1),deepCopy(mockData2)];
        // console.log(param);
        chart.refresh(); //一定要refresh，否则不起作用
    }
 	//单击关键点！
    //显示的图片是否有子节点以及是否收缩了建议用不同的symbol图片（不直接使用的图片预加载过来）
    function clickFun2(param) {
        // console.log(JSON.stringify(param));
        if(!(param.data.children && param.data.children.length > 0)) {
            console.log('open');
            if(param.data.children_bak) {
                param.data.children = param.data.children_bak;
            }
            else {
            	//TODO load data from server
                param.data.children = [deepCopy(mockData1),deepCopy(mockData2)]; //加载数据，此处用测试数据
            }
        } else {
            console.log('close');
            param.data.children_bak = param.data.children;
            param.data.children = []; //root节点会在refresh时读children的length
        }
        console.log(param);
        chart.refresh(); //一定要refresh，否则不起作用
    }

    function deepCopy(p, c) {
　　　　var c = c || {};
　　　　for (var i in p) {
　　　　　　if (typeof p[i] === 'object') {
　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　　　deepCopy(p[i], c[i]);
　　　　　　} else {
　　　　　　　　　c[i] = p[i];
　　　　　　}
　　　　}
　　　　return c;
　　}
    </script>
</head>
 
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
</body>
 
</html>